<template>
    <div>
        <el-button style="margin:8px 8px" size="mini" @click="getNingboChart">宁波市</el-button>
        <div style="width: 100%;">
            <div id="analysisMap1"></div>
        </div>
    </div>
</template>
<script>
import ningboJson from '../../../../assets/map/assets/宁波市.json'

export default {
    data() {
        return {
            //地图
            myChartMap: null, // 图表
            mapName: '宁波市', // 当前map名称
            // geoCoordMap: {
            //     '慈溪市': [121.248052, 30.177142, 666],
            //     '镇海区': [121.713162, 29.952107, 666],
            //     '海曙区': [121.539698, 29.874452, 666],
            //     '江北区': [121.559282, 29.888361, 16],
            //     '鄞州区': [121.558436, 29.831662, 16],
            //     '宁海县': [121.432606, 29.299836, 66],
            //     '奉化区': [121.41089, 29.662348, 66],
            //     '北仑区': [121.831303, 29.90944, 99],
            //     '象山县': [121.877091, 29.470206, 11],
            //     '余姚市': [121.156294, 30.045404, 46],
            // },
            // data: [ // 这里我写的是静态数据，测试用的，具体情况按你们接口拿到的数据来
            //     { name: '慈溪市', value: 666 },
            //     { name: '镇海区', value: 666 },
            //     { name: '海曙区', value: 666 },
            //     { name: '江北区', value: 16 },
            //     { name: '鄞州区', value: 666 },
            //     { name: '宁海县', value: 66 },
            //     { name: '奉化区', value: 166 },
            //     { name: '北仑区', value: 666 },
            //     { name: '象山县', value: 66 },
            //     { name: '余姚市', value: 999 }
            // ],

            // 地图配置项
            option: {
                visualMap: {
                    // show: false,左侧
                    min: 1,
                    max: 1000,
                    // text: ['高', '低'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['#72c0ff', '#2899ff', '#0053b7']
                    },
                    left: "30",
                    textStyle: {
                        color: "#fff"
                    }
                    // contentColor: "#fff"
                },
                //鼠标移动显示提示
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (typeof (params.value)[2] == "undefined") {
                            return params.name + ' : ' + params.value;
                        } else {
                            return params.name + ' : ' + params.value[2];
                        }
                    }

                },
                // bmap: {
                //     center: [121.56, 29.86],
                //     zoom: 5,
                //     roam: true,
                //     mapStyle: {
                //         styleJson: [
                //             {
                //                 featureType: 'water',
                //                 elementType: 'all',
                //                 stylers: {
                //                     color: '#d1d1d1'
                //                 }
                //             },
                //             {
                //                 featureType: 'land',
                //                 elementType: 'all',
                //                 stylers: {
                //                     color: '#f3f3f3'
                //                 }
                //             },
                //             {
                //                 featureType: 'railway',
                //                 elementType: 'all',
                //                 stylers: {
                //                     visibility: 'off'
                //                 }
                //             },
                //             {
                //                 featureType: 'highway',
                //                 elementType: 'all',
                //                 stylers: {
                //                     color: '#fdfdfd'
                //                 }
                //             },
                //             {
                //                 featureType: 'highway',
                //                 elementType: 'labels',
                //                 stylers: {
                //                     visibility: 'off'
                //                 }
                //             },
                //             {
                //                 featureType: 'arterial',
                //                 elementType: 'geometry',
                //                 stylers: {
                //                     color: '#fefefe'
                //                 }
                //             },
                //             {
                //                 featureType: 'arterial',
                //                 elementType: 'geometry.fill',
                //                 stylers: {
                //                     color: '#fefefe'
                //                 }
                //             },
                //             {
                //                 featureType: 'poi',
                //                 elementType: 'all',
                //                 stylers: {
                //                     visibility: 'off'
                //                 }
                //             },
                //             {
                //                 featureType: 'green',
                //                 elementType: 'all',
                //                 stylers: {
                //                     visibility: 'off'
                //                 }
                //             },
                //             {
                //                 featureType: 'subway',
                //                 elementType: 'all',
                //                 stylers: {
                //                     visibility: 'off'
                //                 }
                //             },
                //             {
                //                 featureType: 'manmade',
                //                 elementType: 'all',
                //                 stylers: {
                //                     color: '#d1d1d1'
                //                 }
                //             },
                //             {
                //                 featureType: 'local',
                //                 elementType: 'all',
                //                 stylers: {
                //                     color: '#d1d1d1'
                //                 }
                //             },
                //             {
                //                 featureType: 'arterial',
                //                 elementType: 'labels',
                //                 stylers: {
                //                     visibility: 'off'
                //                 }
                //             },
                //             {
                //                 featureType: 'boundary',
                //                 elementType: 'all',
                //                 stylers: {
                //                     color: '#fefefe'
                //                 }
                //             },
                //             {
                //                 featureType: 'building',
                //                 elementType: 'all',
                //                 stylers: {
                //                     color: '#d1d1d1'
                //                 }
                //             },
                //             {
                //                 featureType: 'label',
                //                 elementType: 'labels.text.fill',
                //                 stylers: {
                //                     color: '#999999'
                //                 }
                //             }
                //         ]
                //     }
                // },
                geo: {
                    map: "宁波市",
                    roam: false,// 一定要关闭拖拽
                    zoom: 1.25,
                    // center: [105, 36], // 调整地图位置
                    label: {
                        normal: {
                            show: true, //省份名展示
                            fontSize: "10",
                            // color: "rgba(0,0,0,0.7)"
                            color: "#fff"
                        },
                        emphasis: {
                            show: true
                        },
                        tooltip: {
                            show: true
                        },
                    },
                    // roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            //鼠标指向后的颜色
                            areaColor: '#309dff',
                        }
                    }
                },
                series: [
                    {
                        type: "map",
                        map: "宁波市",
                        coordinateSystem: 'geo',
                        geoIndex: 0, // 解决设置geo后地图重影问题
                        zoom: 1.25, //这里是关键，一定要放在 series中
                        // silent: false, //鼠标移入区域变色 如果设置为true则无法高亮

                        data: [ // 这里我写的是静态数据，测试用的，具体情况按你们接口拿到的数据来
                            { name: '慈溪市', value: 666 },
                            { name: '镇海区', value: 666 },
                            { name: '海曙区', value: 666 },
                            { name: '江北区', value: 16 },
                            { name: '鄞州区', value: 666 },
                            { name: '宁海县', value: 66 },
                            { name: '奉化区', value: 166 },
                            { name: '北仑区', value: 666 },
                            { name: '象山县', value: 66 },
                            { name: '余姚市', value: 999 }
                        ],



                    },
                    // {
                    //     name: 'Top 5',
                    //     type: 'effectScatter',
                    //     coordinateSystem: 'bmap',
                    //     data: {
                    //         '慈溪市': [121.248052, 30.177142, 666],
                    //         '镇海区': [121.713162, 29.952107, 666],
                    //         '海曙区': [121.539698, 29.874452, 666],
                    //         '江北区': [121.559282, 29.888361, 16],
                    //         '鄞州区': [121.558436, 29.831662, 16],
                    //         '宁海县': [121.432606, 29.299836, 66],
                    //         '奉化区': [121.41089, 29.662348, 66],
                    //         '北仑区': [121.831303, 29.90944, 99],
                    //         '象山县': [121.877091, 29.470206, 11],
                    //         '余姚市': [121.156294, 30.045404, 46],
                    //     },
                    //     symbolSize: function (val) {
                    //         return val[2] / 10;
                    //     },
                    //     encode: {
                    //         value: 2
                    //     },
                    //     showEffectOn: 'render',
                    //     rippleEffect: {
                    //         brushType: 'stroke'
                    //     },
                    //     label: {
                    //         formatter: '{b}',
                    //         position: 'right',
                    //         show: true
                    //     },
                    //     itemStyle: {
                    //         shadowBlur: 10,
                    //         shadowColor: '#333'
                    //     },
                    //     emphasis: {
                    //         scale: true
                    //     },
                    //     zlevel: 1
                    // }


                ]
            },
            //地图end
        }
    },
    methods: {
        // convertData(data) {
        //     var res = [];
        //     for (var i = 0; i < data.length; i++) {
        //         var geoCoord = geoCoordMap[data[i].name];
        //         if (geoCoord) {
        //             res.push({
        //                 name: data[i].name,
        //                 value: geoCoord.concat(data[i].value)
        //             });
        //         }
        //     }
        //     return res;
        // },
        // 地图显示
        analysisMap() {
            // 地图echarts
            this.myChartMap = this.$echarts.init(document.getElementById("analysisMap1"))
            // 注册默认全国地图的json!!!
            this.$echarts.registerMap('宁波市', ningboJson)

            // 绘制图表
            this.myChartMap.setOption(this.option)
            // 设置点击事件
            this.myChartMap.on('click', (e) => {
                this.mapName = e.name
                if (e.componentSubType == 'map') {
                    this.getDownData(e.name)
                }
            })

        },
        // 点击某个省份/区县模块，下钻数据
        async getDownData(name) {
            // 获取到下钻的json数据
            let newMapJson = await this.getMapJson(name)
            // 注册新下钻数据的map
            this.$echarts.registerMap(name, newMapJson)
            // 把option中map设置为最新下钻的map名称
            this.option.series[0].map = name
            this.option.geo.map = name
            // 设置更改后的配置项
            this.myChartMap.setOption(this.option)
        },
        // 根据点击动态获取对应下钻的json数据
        async getMapJson(name) {
            let jsonData = await import('../../../../assets/map/assets/' + name + '.json')
            return jsonData
        },
        // 点击宁波市按钮触发
        getNingboChart() {
            console.log("clickNingbo")
            this.mapName = null
            // 注册默认地图的json
            this.$echarts.registerMap('宁波市', ningboJson)
            // 绘制图表
            this.myChartMap.setOption(this.option)
            // 把option中map设置为'china'名称
            this.option.series[0].map = '宁波市'
            this.option.geo.map = '宁波市'
            console.log("clickNingboEnd")
            // setTimeout(() => {
            this.getNingboChartAgain()
            // }, 100)

        },
        //由于单次点击无法返回上一级地图，双击之后才能返回，这里再写一个函数在上方 getNingboChart 中调用该函数来解决单次点击后等待0.1s返回上级地图
        getNingboChartAgain() {
            console.log("clickNingboAgain")
            this.mapName = null
            // 注册默认地图的json
            this.$echarts.registerMap('宁波市', ningboJson)
            // 绘制图表
            this.myChartMap.setOption(this.option)
            // 把option中map设置为'宁波市'
            this.option.series[0].map = '宁波市'
            this.option.geo.map = '宁波市'
            console.log("clickNingboEndAgain")

        },

    },
    computed: {
    },
    mounted() {
        this.analysisMap();
    }
}
</script>
<style>
/* 地图 */
#analysisMap1 {
    width: 100%;
    background-size: 100% 100%;
    height: 490px;
}
</style>